vue中el |
您所在的位置:网站首页 › css 字体超出省略号什么意思 › vue中el |
文章目录
前言一、问题描述二、解决办法总结
前言
好久没写博客了,之前说好的每日一更,现在已经快一个月了,还是人太懒了吧,终于找到工作了,在公司实习搞前端开发,具体是什么公司就不说了。为了实习工作这将近一个月左右时间,出来找出租房又是整学校的材料啥的,耽误太多时间了,学校也还有个项目没搞完。实惨T^T. 好了也不废话了,既然能找到这篇博客,说明你也遇到了相同的问题,说不定可以在我这里找到解决方法,下面就看看我的方法吧,虽然不是最好的办法,但是对我来说能解决问题就行,哈哈哈。 一、问题描述
![]() ![]() 可以看到上面同样设置了属性,但是在插槽内如果又添加新的元素会导致缩略的文字省略号无法实现,只要在el-table中使用插槽并且添加新的元素,就会导致show-overflow-tooltip属性的效果没有完全实现。 二、解决办法先附上一张解决后的效果。 问题解决了,但是还是有些许瑕疵,比如省略号颜色,本人暂时没有找到解决办法,还有就是原本element-ui封装的组件有许多样式都是封装好的不易更改,所以这里直接使用a标签来替代el-link,然后写上文字缩略的css样式来实现效果,这里样式没有指定宽度,是因为可以从父元素也就是el-table-column继承宽度,所以没有设定宽度。而且这个也像一个补丁主要是表格单元格如果内嵌元素不会缩略截断文字并显示省略号,这里我手动补上这个缺陷,其他的效果还是依赖于element官方show-overflow-tooltip这个属性来实现,当然也可以自己实现,但是那样就复杂化了。 总结以上代码是从项目问题中抽出来的一个demo,实际项目中可能要根据自己的需求去更改一些地方,但是主要解决方法还是一样,在我解决这个问题的地方,是进行了element-ui表格的二次封装,这个缩略属性是作为表头数据传入的,所以在封装的插槽中,我将css部分单独抽出一个类,然后根据传入的缩略属性再去进一步的决定显示样式,并且这个缩略样式要根据自己的需求去完成,总之根据自己想要的显示效果进行修改就行了。 —— 2020.12.16 摸鱼工作记录 今日份励志语句: 优秀的程序员像一名艺术家,每行代码都是反复斟酌后的艺术品。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |